import React, { useState, useEffect } from 'react';
import { Form, Radio, DatePicker, Button, Tabs, Icon } from 'antd';
import moment from 'moment';
import { userId } from '@/constant';
import { connect } from 'dva';
import TableData from './TableData';
import ChartData from './ChartData';
import WaterPolo from './WaterPolo';
const creator = (type, payload) => ({ type, payload });
const id = window.sessionStorage.getItem(userId);
const { TabPane } = Tabs;
const format = 'YYYY-MM-DD HH:mm:ss';
const Execrise = props => {
  const { exerciseData } = props.exercise;
  const { dispatch, form } = props;
  const [type, setType] = useState('本日');
  useEffect(() => {
    let start = moment().startOf('day');
    let end = moment().endOf('day');
    // dispatch(creator('exercise/getExerciseData', { id, start, end }));
  }, []);
  const callback = key => {
    // console.log(key);
  };

  //获取运动记录
  const getExercise = type => {
    const { dispatch } = props;
    let start = moment();
    let end = moment();
    if (type === 'today') {
      start = moment().startOf('day');
      end = moment().endOf('day');
    } else if (type === 'week') {
      start = moment().startOf('week');
      end = moment().endOf('week');
    } else if (type === 'month') {
      start = moment().startOf('month');
      end = moment().endOf('month');
    } else if (type === 'year') {
      start = moment().startOf('year');
      end = moment().endOf('year');
    } else if (type === 'all') {
      start = moment().startOf('year');
      end = moment().endOf('year');
    }
    dispatch(creator('exercise/getExerciseData', { id, start, end, type }));
  };
  const add = () => {
    form.validateFields((err, fields) => {
      fields.id = id;
      fields.end.add(30, 'minutes');
      fields.time = fields.end.diff(fields.start, 'minutes');
      fields.place = '南京';
      fields.mileage = 5;
      dispatch(creator('exercise/addExerciseData', fields));
    });
  };
  const radioChange = e => {
    setType(e.target.value);
  };
  const { getFieldDecorator } = props.form;
  return (
    <div style={{ margin: 20 }}>
      {/* <main style={{ height: 600 }}>
        {exerciseData.map(item => (
          <p key={item._id}>
            <span>里程：{item.mileage}</span>
            <span>时长：{item.time}</span>
            <span>地点：{item.place}</span>
          </p>
        ))}
        <Form>
          <Form.Item>
            {getFieldDecorator('start', {
              rules: [
                {
                  required: true,
                  message: '请选择开始日期',
                },
              ],
            })(<DatePicker placeholder="请选择开始日期" style={{ width: 150 }} format={format} />)}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('end', {
              rules: [
                {
                  required: true,
                  message: '请选择开始日期',
                },
              ],
            })(<DatePicker placeholder="请选择开始日期" style={{ width: 150 }} format={format} />)}
          </Form.Item>
          <Form.Item>
            <Button onClick={add}>增加</Button>
          </Form.Item>
        </Form>
      </main> */}
      {type === '本日' ? (
        <div style={{marginBottom:20}}>
          <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
            <WaterPolo
              content={exerciseData.length ? exerciseData[0].mileage + 'km' : '0km'}
              title="今日里程"
            />
          </div>
          <div  style={{display:'flex',justifyContent:'space-between'}}>
            <WaterPolo
              content={exerciseData.length ? exerciseData[0].time + 'min' : '0min'}
              title="跑步耗时"
            />
            <WaterPolo
              content={exerciseData.length ? exerciseData[0].place : '-'}
              title="运动地点"
            />
          </div>
        </div>
      ) : (
        <Tabs>
          <TabPane
            tab={
              <span>
                <Icon type="table" />
                表格
              </span>
            }
            key="1"
          >
            <TableData />
          </TabPane>
          <TabPane
            tab={
              <span>
                <Icon type="pie-chart" />
                图表
              </span>
            }
            key="2"
          >
            <ChartData />
          </TabPane>
        </Tabs>
      )}

      <Radio.Group style={{ marginTop: 10 }} onChange={radioChange}>
        <Radio.Button value="本日" onClick={getExercise.bind(this, 'today')}>
          本日
        </Radio.Button>
        <Radio.Button value="本周" onClick={getExercise.bind(this, 'week')}>
          本周
        </Radio.Button>
        <Radio.Button value="本月" onClick={getExercise.bind(this, 'month')}>
          本月
        </Radio.Button>
        <Radio.Button value="本年" onClick={getExercise.bind(this, 'year')}>
          本年
        </Radio.Button>
        <Radio.Button value="所有" onClick={getExercise.bind(this, 'all')}>
          所有
        </Radio.Button>
      </Radio.Group>
    </div>
  );
};

const WrappedExecrise = Form.create()(Execrise);

export default connect(({ exercise }) => ({ exercise }))(WrappedExecrise);
